<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2-饼图-官方示例</title>
		<!-- 导入Jquery -->
		<script type="text/javascript" src="js/jquery2.1.4.min.js"></script>
		<!-- 导入echart插件 -->
		<script type="text/javascript" src="js/echarts.min.js"></script>
		<style type="text/css">
			.box{
				width:600px;
				height:500px;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<script type="text/javascript">
			//页面加载
			$(function(){
				console.log('over...');
				//token令牌qwertyuiopsdfghjkldfghjdfghj
				dataSource();
				//定时器,轮询后端数据
				setInterval(dataSource,1000*60);
			});
			
			function dataSource(){
				$.ajax({
					url:'https://cache.iminutes.cn/api/soft/visitor.html',
					type:"GET",
					data:{
						
					},
					dataType:'json',
					success:function(res){
						//console.log(res);
						if(res.status==200){
							getVisitor(res);
						}else{
							alert('数据请求失败!');
						}
					}
				});
			}
			
			//请求数据
			function getVisitor(res){
				console.log(res);
				//基于准备好的dom，初始化echarts实例
				var myChart = echarts.init(document.querySelector('.box'));
				//指定图表的配置项和数据
				var option = {
				  title: {
				    text: res.title,
				    subtext: res.subtext,
				    left: 'center'
				  },
				  tooltip: {
				    trigger: 'item'
				  },
				  legend: {
				    orient: 'vertical',
				    left: 'left'
				  },
				  series: [
				    {
				      name: '数据统计',
				      type: 'pie',
				      radius: '50%',
				      data: res.data,
				      emphasis: {
				        itemStyle: {
				          shadowBlur: 10,
				          shadowOffsetX: 0,
				          shadowColor: 'rgba(0, 0, 0, 0.5)'
				        }
				      }
				    }
				  ]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			}
		</script>
	</body>
</html>